<!--  -->
<template>
  <div class="">
    <div class="warp">
      <GroupList :groupList="groupList" @groupChange="groupChange" />
      <div>
        <a-button v-has="'content:album:remove'" class="mr" type="danger" @click="handleDelAlbum">{{isAlbumDel ? '取消删除' : '删除相册'}}</a-button>
        <a-button v-has="'content:album:removeRow'" :disabled="!belongId" class="mr" type="danger" @click="handleDelGroup">删除分组</a-button>
        <a-button v-has="'content:album:editRow'" :disabled="!belongId" class="mr" type="primary" @click="handleEditGroup">编辑分组</a-button>
      </div>
      <GroupModal ref="groupModal" />
    </div>

    <AlbumList />
  </div>
</template>

<script>
import GroupList from "../components/groupList";
import AlbumList from "../components/albumList";
import GroupModal from '../components/modal/createGroup.vue'
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { forceDelPhotoAlbumGroup } from '@/api/content/operate'
export default {
  components: {
    GroupList,
    AlbumList,
    GroupModal
  },
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters(['groupList', 'isAlbumDel', 'belongId'])
  },
  watch: {},
  methods: {
    ...mapActions(['GetGroupList', 'GetPhotoAlbum', 'SetBelongId']),
    ...mapMutations(['SET_ISALBUMDEL', 'SET_ALBUMCURRENT']),
    //分组选项选择回调
    groupChange(val) {
        this.SET_ALBUMCURRENT(1)
        this.SetBelongId(val)
        this.GetPhotoAlbum()
    },
    //删除相册
    handleDelAlbum(){
      this.SET_ISALBUMDEL(!this.isAlbumDel)
    },
    //删除分组
    async handleDelGroup(){
      var _this = this;
      this.$confirm({
        title: "删除分组?",
        content: "此操作将删除分组内所有图片，是否继续？",
        onOk: async () => {
          let { code, msg } = await forceDelPhotoAlbumGroup(_this.belongId)
          _this.$message[code === 0 ? 'success' : 'error'](msg)
          if(code === 0){
            await _this.GetGroupList()
            _this.GetPhotoAlbum()
          }
        },
        onCancel() { },
      });
    },
    handleEditGroup(){
      let data = this.groupList.find(f => f.id === this.belongId)
          data = data ? JSON.parse(JSON.stringify(data)) : {}
      let obj = {
        type: 'edit',
        title: '编辑分组',
        data
      }
      this.$refs.groupModal.show(obj)
    }
  },
  async created() {
    await this.GetGroupList();
    this.GetPhotoAlbum();
  },
  mounted() {},
};
</script>
<style scoped lang="less">
  .warp{
    display: flex;
    justify-content: space-between;
    .mr{
      margin-right: 10px;
    }
  }
</style>
